<script lang="ts" setup>
interface YourSystemInfo {
  userAgent: string;
  platform: string;
  language: string;
}
const yourSystemInfo = ref<YourSystemInfo>();
const systemInfo = ref({
  web: "Vue + ElementPlus + tailwindcss",
  server: "SpringBoot + MybatisPlus + Hutool",
});
const regex = /\((.+?)\)/g;
onMounted(() => {
  console.log(window.navigator);
  yourSystemInfo.value = {
    userAgent: window.navigator.userAgent,
    platform: window.navigator.userAgent.match(regex)![0],
    language: window.navigator.language,
  };
  console.log(window.navigator.userAgent.match(regex));
});
onMounted(() => {});
</script>
<template>
  <div>
    <el-card>
      <template #header> 你的系统信息 </template>
      <template #default>
        <div v-for="(value, key) in yourSystemInfo" :key="key">
          {{ key }} - {{ value }}
        </div>
        <el-divider border-style="dashed" />
        <div v-for="(value, key) in systemInfo" :key="key">
          {{ key }} -- {{ value }}
        </div>
      </template>
    </el-card>
  </div>
</template>
<style lang="scss" scoped></style>
